<script setup lang="ts">
import { useUserStore } from "@/stores/userStore";
import { orderStatus } from "@/contants/classification";
import { Formattime } from "@/logics/geshiitem";
import { UserAPI } from "@/api/UserAPI";
import { placeholderSign } from "element-plus/es/components/table-v2/src/private";

//获取用户名store对象
const userStore = useUserStore();
const { userinfo } = storeToRefs(userStore);
//获取用户收藏列表
userStore.getCollect_list();
//单选按钮
const names = ref();
//全选按钮
const allbut = ref();

const nidlist = <number[]>[];
//计算选中数量
const Cal_number = ref(0);
//封装为计算函数
function Cal_namberfun() {
  Cal_number.value = names.value.filter((item: any) => {
    return item.checked == true;
  }).length;
}
async function check() {
  names.value.forEach((item: any) => {
    if (item.checked) {
      nidlist.push(item.value);
    }
  });
  await UserAPI.Cancel_collection(nidlist);
  userStore.getCollect_list();
  names.value.forEach((item: any) => {
    item.checked = false;
  });
}
//点击全选
function allbutton() {
  names.value.forEach((item: any) => {
    item.checked = allbut.value.checked;
  });
  Cal_namberfun();
}
//点击单选
function Danxuan() {
  const isall = names.value.every((item: any) => {
    return item.checked == true;
  });
  allbut.value.checked = isall;
  Cal_namberfun();
}
</script>
<template>
  <main>
    <BkPersonalcenter></BkPersonalcenter>
    <div class="collection_article_all">
      <p>
        共收藏文章{{ userinfo.result.collects_list?.length }}篇,选择{{
          Cal_number
        }}篇
      </p>
      <table
        class="collection_table"
        v-show="userinfo.result.collects_list?.length"
      >
        <thead>
          <tr>
            <th>
              <input type="checkbox" ref="allbut" @click="allbutton" />
            </th>
            <th>标题</th>
            <th>分类</th>
            <th>标签</th>
            <th>阅读</th>
            <th>收藏</th>
            <th>发布时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="col in userinfo.result.collects_list">
            <td class="select">
              <input
                type="checkbox"
                ref="names"
                name="nid"
                :value="col.nid"
                @click="Danxuan"
              />
            </td>
            <td>
              <a :href="`/article/${col.nid}/`" target="_blank">{{
                col.title
              }}</a>
            </td>
            <td>{{ orderStatus[col.category] }}</td>
            <td class="tags">
              <i v-for="tag in col.tag">{{ tag }}</i>
            </td>
            <td>{{ col.look_count }}</td>
            <td>{{ col.collects_count }}</td>
            <td>{{ Formattime(col.create_date) }}</td>
          </tr>
        </tbody>
      </table>
      <input
        v-show="userinfo.result.collects_list?.length"
        type="submit"
        class="cancel_btn"
        @click="check"
        value="取消收藏"
      />
    </div>
  </main>
</template>

<style scoped lang="scss">
main {
  .collection_article_all {
    margin-top: 20px;

    > P {
      padding-top: 10px;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }

  .collection_table {
    width: 100%;
    border-spacing: 1px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #a0b1c5;

    thead {
      tr {
        color: var(--el-text-color-primary);
        font-weight: 600;
        height: 50px;
        background-color: var(--el-bg-color);
      }
    }

    tbody {
      tr {
        height: 40px;
        font-size: 14px;
        transition: all 0.3s;

        td {
          text-align: center;

          a {
            color: var(--el-text-color-regular);
          }
        }

        .select {
          input {
            cursor: pointer;
          }
        }

        .tags {
          i {
            margin-right: 5px;
            padding: 0 5px;
            color: white;
            border-radius: 5px;
            font-size: 12px;
            height: 20px;
            display: inline-flex;
            align-items: center;
          }

          i:nth-child(4n) {
            background-color: #ff9800;
          }

          i:nth-child(4n + 1) {
            background-color: #dd6161;
          }

          i:nth-child(4n + 2) {
            background-color: #26c6da;
          }

          i:nth-child(4n + 3) {
            background-color: #3a8ee6;
          }

          i:last-child {
            margin-right: 0;
          }
        }
      }

      tr:nth-of-type(odd) {
        background-color: var(--el-fill-color);

        &:hover {
          background-color: var(--el-border-color);
        }
      }

      tr:nth-of-type(even) {
        background-color: var(--el-fill-color-extra-light);
        &:hover {
          background-color: var(--el-fill-color-darker);
        }
      }
    }
  }
  .cancel_btn {
    margin-top: 10px;
    border-radius: 5px;
    outline: none;
    border: 1px solid #f0eeee;
    width: 100px;
    height: 40px;
    cursor: pointer;
    color: white;
    background-color: #666d83;
  }
}
</style>
